/**
* @title: 注册页
* @description:
* @author JUN
*/


<template>
	<div class="register">
		<div class="register_1">
			<div class="welcome">欢迎注册</div>
			<div class="system">xxxxxxxxx系统</div>
		</div>
		<div class="register_2">
			<div>
				<el-input v-model="name" placeholder="请输入账号" style="width: 50%"></el-input>
			</div>
			<div>
				<el-input placeholder="请输入密码" v-model="pwd" show-password style="width: 50%"></el-input>
			</div>
			<div>
				<el-input placeholder="确认密码" v-model="pwds" show-password style="width: 50%"></el-input>
			</div>
			<div>
				<el-input v-model="email" placeholder="请输入邮箱" style="width: 50%"></el-input>
			</div>
			<div>
				<el-input v-model="phone" placeholder="请输入电话号码" style="width: 30%"></el-input>
				<el-button type="primary" style="width: 20%">获取验证码</el-button>
			</div>
			<div>
				<el-input v-model="veCode" placeholder="请输入验证码" style="width: 50%"></el-input>
			</div>
			<div>
				<el-button type="primary" style="width: 50%">注册</el-button>
			</div>
			<div>已有账号？
				<router-link :to="{path:'./login'}">
					<span>点击登录</span>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '',   //账号
				pwd: '',    //密码
				pwds:'',    //确认密码
				email:'',   //邮箱
				phone:'',   //电话
				veCode:''   //验证码
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		display: flex;

		.register_1 {
			width: 50%;
			box-sizing: border-box;
			margin-top: 250px;
			.welcome {
				font-size: 88px;
				color: #000;
				text-align: center;
			}
			.system {
				font-size: 45px;
				text-align: center;
			}
		}

		.register_2 {
			width: 50%;
			box-sizing: border-box;
			margin-top: 150px;

			div {
				margin-bottom: 10px;
				text-align: center;

				span {
					color: blue;
				}
			}
		}
	}
</style>
